<template>
  <view class="rank_box">
    <view class="rank_title red_cl">「申爱」地图排行</view>
    <view class="rank_map">
      <mpvue-echarts id="main" ref="mapChart" :echarts="echarts" @onInit="renderMap" />
    </view>
    <!-- <view class="gray_bar"></view> -->
    <view class="rank_info">
      <view class="rank_title red_cl">「申爱」榜</view>

      <view class="rank_item" v-for="(item,index) in data" :key="index">
        <view class="rank_rank">{{index + 1}}</view>

        <view class="rank_city">{{item.name}}</view>
        <view class="red_cl">{{item.value}}次</view>
      </view>

    </view>

  </view>
</template>

<script>
  import {
    getRank
  } from "@/api/home.js";
  import * as echarts from '@/echarts/echarts.min.js'; /*echarts.min.js为在线定制*/
  import * as chinaJson from '@/echarts/map/json/china.json'; /*echart.min.js为在线定制*/
  import mpvueEcharts from '@/components/mpvue-echarts/src/echarts.vue';


  export default {
    name: "rank",
    data() {
      return {
        echarts,
        rankList: [{
          rank: 1,
          name: "黑龙江",
          value: 52
        }, {
          rank: 2,
          name: "上海",
          value: 42
        }, {
          rank: 3,
          name: "湖北",
          value: 32
        }, {
          rank: 4,
          name: "山东",
          value: 22
        }],
        data: [{
            name: "南海诸岛",
            value: this.randomValue()
          },
          {
            name: '北京',
            value: this.randomValue()
          },
          {
            name: '天津',
            value: this.randomValue()
          },
          {
            name: '上海市',
            value: this.randomValue()
          },
          {
            name: '重庆',
            value: this.randomValue()
          },
          {
            name: '河北',
            value: this.randomValue()
          },
          {
            name: '河南',
            value: this.randomValue()
          },
          {
            name: '云南',
            value: this.randomValue()
          },
          {
            name: '辽宁',
            value: this.randomValue()
          },
          {
            name: '黑龙江',
            value: this.randomValue()
          },
          {
            name: '湖南',
            value: this.randomValue()
          },
          {
            name: '安徽',
            value: this.randomValue()
          },
          {
            name: '山东',
            value: this.randomValue()
          },
          {
            name: '新疆',
            value: this.randomValue()
          },
          {
            name: '江苏',
            value: this.randomValue()
          },
          {
            name: '浙江',
            value: this.randomValue()
          },
          {
            name: '江西',
            value: this.randomValue()
          },
          {
            name: '湖北',
            value: this.randomValue()
          },
          {
            name: '广西',
            value: this.randomValue()
          },
          {
            name: '甘肃',
            value: this.randomValue()
          },
          {
            name: '山西',
            value: this.randomValue()
          },
          {
            name: '内蒙古',
            value: 22
          },
          {
            name: '陕西',
            value: this.randomValue()
          },
          {
            name: '吉林',
            value: this.randomValue()
          },
          {
            name: '福建',
            value: this.randomValue()
          },
          {
            name: '贵州',
            value: this.randomValue()
          },
          {
            name: '广东',
            value: 20
          },
          {
            name: '青海',
            value: this.randomValue()
          },
          {
            name: '西藏',
            value: 0
          },
          {
            name: '四川',
            value: this.randomValue()
          },
          {
            name: '宁夏',
            value: this.randomValue()
          },
          {
            name: '海南',
            value: this.randomValue()
          },
          {
            name: '台湾',
            value: this.randomValue()
          },
          {
            name: '香港',
            value: this.randomValue()
          },
          {
            name: '澳门',
            value: this.randomValue()
          }
        ],
        rankRefresh:false
      };
    },
    components: {
      mpvueEcharts
    },
    onLoad() {

    },
    mounted() {
      uni.$on('rankRefresh', (param) => {
        this.rankRefresh=true;
        
      })
    },
    methods: {
      changeRankRefresh(){
        this.rankRefresh=false;
      },
      randomValue() {
        return Math.round(Math.random() * 25);
      },
      renderMap(e) {
        getRank().then(res => {
          this.data =  Object.entries(res.data.data.rank).map(([key, value]) => ({
             name: key,
             value: value
           }));
           this.data.sort((a, b) => b.value - a.value);
     

          const that = this;
          
          var mydata = that.data;
          let {
            canvas,
            width,
            height
          } = e;
          width = width - 20;
          echarts.setCanvasCreator(() => canvas);
          const chart = echarts.init(canvas, null, {
            width: 340,
            height: 150
          })
          echarts.registerMap('china', chinaJson);
          canvas.setChart(chart)
          var optionMap = {

            backgroundColor: 'transparent',
            tooltip: {
              trigger: 'item',
              formatter: '{b}:{c}次爱心'
            },

            //左侧小导航图标
            visualMap: {
              min: 0,
              max: 25,
              left: 'left',
              top: 'bottom',
              // orient:'horizontal',
              // text: ['高', '低'], //取值范围的文字
              inRange: {
                color: ['#ffffff', '#f3856c'] //取值范围的颜色
              },
              show: true, //图注
              pieces: [ //自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式
                {
                  min: 0,
                  max: 5,
                  label: '0~5'
                },
                {
                  min: 5,
                  max: 10,
                  label: '5~10'
                },
                {
                  min: 10,
                  max: 15,
                  label: '10~15'
                },
                {
                  min: 15,
                  max: 20,
                  label: '15~20'
                },
                {
                  min: 20,
                  max: 25,
                  label: '20~25'
                },
              ],
              hoverLink: true,
              textStyle: {
                fontSize: 8
              },
            },
            geo: {
              map: 'china',
              roam: false, //不开启缩放和平移
              zoom: 1.2, //视角缩放比例
              label: {
                normal: {
                  show: false,
                  fontSize: 8,
                  color: 'rgba(0, 0, 0, 0.5)' //文字颜色
                }
              },
              itemStyle: {
                normal: {
                  borderColor: 'rgba(0, 0, 0, 0.2)' //省份边框颜色
                },
                emphasis: {
                  areaColor: '#F3B329', //鼠标选择区域颜色
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                  shadowBlur: 20,
                  borderWidth: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.2)' //选择后的边框阴影颜色
                }
              }
            },
            //配置属性
            series: [{
              type: 'map',
              geoIndex: 0,
              animation: false,
              data: mydata,
            }]
          };
          //初始化echarts实例
          chart.setOption(optionMap);
          this.$refs.mapChart.setChart(chart);
        })
      }
    }
  };
</script>

<style scoped lang="scss">
  .rank_box {
    width: 100%;
    height: 100%;
    background-color: white;
    border-radius: 15rpx;
    // padding: 20rpx;


  }

  .rank_map {
    height: 320rpx;
    width: 550rpx;
    margin: 40rpx auto 0
  }

  .rank_info {
    // height: 507rpx;
    width: 100%;
    // text-align: center;
    border-style: dashed hidden hidden hidden;
    border-color: #d3d3d3;
    border-width: 1rpx;
    overflow: auto;
    max-height: calc(90vh - 264px);
    padding-bottom: 20px;
  }

  .rank_item {
    margin: 20rpx auto 0;
    height: 60rpx;
    width: 500rpx;
    font-size: 26rpx;
    color: #666666;
    display: flex;
    border-style: hidden hidden dashed hidden;
    border-color: #eaeaea;
    border-width: 1rpx;
  }

  .rank_rank {
    font-weight: bold;
    margin-right: 100rpx;
    width: 40rpx;
  }

  .rank_city {
    width: 180rpx;
    margin-right: 100rpx;
  }

  .red_cl {
    color: #a03f1c;
  }

  .rank_title {
    width: 100%;
    font-size: 30rpx;
    text-align: center;
    // color: #666666;
    // margin: 34rpx 0;
    padding-top: 20rpx;

  }

  .gray_bar {
    width: 100%;
    height: 10rpx;
    background-color: #999;
  }
</style>